<script>
import { defineComponent, ref } from 'vue';
import eventBus from '@/utils/eventBus.js'
export default defineComponent({
  name: "SupermapCardMask",
  components: {},
  props: {
    /**
     * width
    */
    width: {
      type: Number,
      default: 0
    },
    /**
     * top
    */
    top: {
      type: Number,
      default: 0
    },
    /**
     * left 偏移
    */
    left: {
      type: Number,
      default: 0
    },
    /**
     * right 偏移
    */
    right: {
      type: Number,
      default: 0
    },
    /**
     * bottom
    */
    bottom: {
      type: Number,
      default: 0
    },
    height: {
      tyep: Number,
      default: 0,
    },
    positionClass: {
      type: Array,
      default() {
        return ['']
      }
    }
  },
  data() {
    const style = {
      width: this.width + 'px',
      // left: this.left + 'px',
      // right: this.right + 'px',
      bottom: this.bottom + 'px',
      top: this.top + 'px',
    }
    if (this.hegiht) {
      style.height = this.right + 'px';
    }
    if (this.right) {
      delete style.left;
      style.right = this.right + 'px';
    } else {
      style.left = this.left + 'px';
    }

    return {
      style: style
    }
  },
  mounted() {
    console.log('执行了');
    // eventBus.on('changeListHeight', this.changeListHeights)
  },
  beforeUnmount() {
    // eventBus.off('changeListHeight', this.changeListHeight);
  },
  watch: {
  },
  computed: {
  },
  beforeRouteLeave() { },
  methods: {
  }
})
</script>

<template>
  <div
    class="supermap-card-mask-wrapper"
    :class="positionClass"
    :style="style">
    <div class="supermap-card-mask-wrapper-inner">
      <slot></slot>
    </div>
  </div>
</template>
<style lang="less" scoped>
@color-base-blue: rgb(42, 76, 227);
@color-note: rgb(0, 255, 255);
@border-radius: 3px;
@width-corner: 15px;
@width-side: -110px;

.supermap-card-mask-wrapper {
  // background-color: rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  transition: all .3s;
  &.left {
    background-image: linear-gradient(to right, #000000, rgba(0,0,0,0.15));
  }

  &:before {
    position: absolute;
    content: " ";
    width: 45px;
    height: 23px;
    left: -4px;
    top: -4px;
    // background-image: url(@/assets/images/icon-top-left.png);
  }

  &:after {
    position: absolute;
    content: " ";
    width: 45px;
    height: 23px;
    right: -4px;
    top: -4px;
    // background-image: url(@/assets/images/icon-top-right.png);
  }

  &>.supermap-card-mask-wrapper-inner {
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    left: 10px;
    // overflow-y: auto;

    &::-webkit-scrollbar-track {
      background-color: transparent;
      border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: transparent;
    }
  }
}
</style>